<template>
	<view class="orderfound">
		<view class="address" v-if='hasadd' @click="addresslist">
			<image src="/static/index/address.png" mode=""></image>
			<view class="info">
				<view class="usermsg">
					<text class="name">{{addressinfo.name}}</text>
					<text class="phone">{{addressinfo.phone}}</text>
				</view>
				<view class="addressmsg">
					<text>{{addressinfo.area_name}} {{addressinfo.address}}</text>
				</view>
			</view>
			<image src="/static/index/jiantou.png" mode=""></image>
		</view>
		<view class="add-address" v-else @click="addressadd">
			新增地址
			<view class="right">
				<image src="/static/index/jiantou.png" mode=""></image>
			</view>
		</view>
		<view class="goodsinfo" v-for="(item,index) in goods" :key='index'>
			<view class="title">
				<image :src="getimg(item.logo_url)" mode=""></image>
				<view class="msg">
					<view class="name">
						{{item.name}}
					</view>
					<view class="content">
						{{item.introduction}}
					</view>
					<view class="price" v-if="isVip">
						￥<text>{{Number(item.price)}}</text>
					</view>
					<view class="price" v-else>
						￥<text>{{Number(item.vip_price)}}</text>
					</view>


				</view>
			</view>
			<view class="goodsnum" v-if="item.goods_type != 3">
				<view class="cut" @click="cut(item)">
					-
				</view>
				<view class="num">
					<input type="number" v-model="item.num" />
				</view>
				<view class="add" @click="add(item)">
					+
				</view>
			</view>
			<view class="goodsfreight">

			</view>
		</view>
		<view class="footer">
			<view>
				合计：
				<text class="text">
					￥<text>{{total}}</text>
				</text>
			</view>
			<view class="getbtn" @click="createOrder">
				提交订单
			</view>
		</view>
	</view>
</template>

<script>
	import {
		OrderFound,
		CreateOrder
	} from '../../api/api.js'
	export default {
		data() {
			return {
				orderid: [],
				goods: [{
					price: 0,
					num: 0,
					logo_url: '',
					vip_price: 0,
					goods_type: 3
				}],
				addressinfo: [],
				level: 3,
				isVip: false,
				hasadd: true,
				type: 2
			}
		},
		computed: {
			total() {
				let num = 0
				if (this.isVip) {
					this.goods.forEach(item => {
						num += item.price * item.num
					})
				} else {
					this.goods.forEach(item => {
						num += item.vip_price * item.num
					})
				}
				return num
			}
		},
		onLoad(e) {
			this.type = e.type
			if (e.type == 1) {
				this.orderid = e.cart
			} else {
				this.orderid = e.goods_id
			}
			this.OrderFound()

		},
		onShow() {
			this.OrderFound()
		},
		methods: {
			createOrder() {
				CreateOrder({
					address_id: this.addressinfo.id,
					data: this.goods,
				}).then(res => {
					if (res.status == 1) {
						uni.redirectTo({
							url: '/pages/orderpay/index?orderid=' + res.order_id
						})
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})

			},
			addresslist() {
				uni.navigateTo({
					url: '/pages/addresslist/index?type=1'
				})
			},
			addressadd() {
				uni.navigateTo({
					url: '/pages/addAddress/index'
				})
			},
			levels() {
				if (this.level > 1) {
					this.isVip = false
				} else {
					this.isVip = true
				}
			},
			getimg(url) {
				return this.websiteUrl + url
			},
			OrderFound() {
				if (this.type == 1) {
					OrderFound({
						cart: this.orderid
					}).then(res => {
						this.addressinfo = res.address
						this.goods = res.Goods
						this.level = res.Level
						this.levels()
					})
				} else {
					OrderFound({
						goods_id: this.orderid
					}).then(res => {
						this.addressinfo = res.address
						this.goods = res.Goods
						this.level = res.Level
						this.levels()
					})
				}
			},
			toPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			cut(e) {
				if (e.num > 1) {
					e.num = e.num - 1
				}
			},
			add(e) {
				if (e.num < 99) {
					e.num = e.num + 1
				}
			},

		}
	}
</script>

<style lang="scss">
	.orderfound {
		padding-top: 20rpx;

		.address {

			display: flex;
			align-items: center;
			width: 84%;
			background: #fff;
			padding: 5%;
			margin: 20rpx auto;
			margin-top: 0;
			border-radius: 16rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			.info {
				width: 80%;
				margin-left: 40rpx;
				font-size: 15px;

				.phone {
					font-size: 12px;
					margin-left: 40rpx;
					color: #777;
				}

				.addressmsg {
					margin-top: 20rpx;
				}
			}
		}

		.goodsinfo {
			width: 84%;
			background: #fff;
			margin: 0 auto;
			padding: 40rpx 5%;
			border-radius: 16rpx;

			.title {
				display: flex;

				image {
					width: 215rpx;
					height: 215rpx;
				}

				.msg {
					flex: 1;
					margin-left: 30rpx;

					.name {
						max-height: 80rpx;
						line-height: 40rpx;
					}

					.content {
						font-size: 26rpx;
						color: #777;
						height: 80rpx;
						line-height: 40rpx;
						overflow: hidden;
						margin-top: 10rpx;
					}

					.price {
						text-align: right;
						color: #FF5A00;
						font-size: 14px;

						text {
							font-weight: bold;
							font-size: 40rpx;
						}
					}
				}
			}

		}

		.goodsnum {
			display: flex;
			justify-content: flex-end;
			padding: 10px 0;
			margin-top: 10px;

			.num {
				width: 40px;
				text-align: center;
				border: 1px solid #ccc;
				border-radius: 5px;
				color: #777;
				margin: 0 10px;
			}
		}

		.goodsfreight {
			display: flex;
			justify-content: space-between;
			padding: 10px 0;
			border-top: 1px solid #efefef;

			.freight {
				font-weight: bold;
				color: #FF5A00;
			}
		}

		.add-address {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 84%;
			background: #fff;
			padding: 5%;
			margin: 20rpx auto;
			margin-top: 0;
			border-radius: 16rpx;
			font-size: 16px;

		}

		.add-address .left .userinfo {
			font-weight: bold;
			font-size: 12px;
			margin-bottom: 20rpx;
		}

		.add-address .left .userinfo text {
			margin-right: 30rpx;

		}

		.add-address .left .address-msg {
			color: #777;
			font-size: 12px;
		}

		.add-address .right image {
			width: 1rem;
			height: 1rem;
		}

		.footer {
			position: fixed;
			width: 100%;
			display: flex;
			justify-content: flex-end;
			bottom: 0;
			height: 100rpx;
			line-height: 100rpx;
			box-shadow: 0 0 5px #ccc;

			.getbtn {
				background: #ff5a00;
				color: #fff;
				margin-left: 40rpx;
				padding: 0 40rpx;
			}

			.text {
				color: #ff5a00;

				text {
					font-size: 40rpx;
					font-weight: bold;
				}
			}
		}
	}
</style>